// 获取 tbody 标签
const tbody = document.querySelector(".nav tbody");

// 获取 nav 标签
const nav = document.querySelector(".nav");

// 后端 api 接口的地址
const apiUrl = "http://localhost:8000";

// 给 按钮添加 事件委托
nav.addEventListener("click", (e) => {
  if (e.target.tagName === "INPUT") {
    // 获取点击的 老师ID
    const teacherId = +e.target.dataset.teacherid;
    // 判断是修改请求还是删除请求
    if (e.target.value === "修改") {
      // 修改请求
      location.href = "./update.html?teacherId=" + teacherId;
    } else if (e.target.value === "删除" && confirm("确认删除？")) {
      // 异步请求
      setTimeout(() => {
        fetch(`${apiUrl}/teachers/` + teacherId, {
          // 请求方法
          method: "delete",
          // 请求头
          headers: { "Content-Type": "Authorization" },
        })
          .then((response) => {
            // 如果状态码 200 则请求成功
            if (response.status === 200) {
              // 解析响应体为 JSON
              return response.json();
            }
            // 否则 抛出异常及当前状态码
            throw new Error(`HTTP error! Status: ${response.status}`);
          })
          .then((data) => {
            if (data.code === 200) {
              // 刷新页面
              location.href = "./index.html";
            } else {
              // 提示信息
              console.log(data.message);
            }
          })
          .catch((error) => {
            console.error(error);
          });
      }, 100);
    }
  }
});

// 获取 分页模块的按钮
const inputs = document.querySelectorAll(`#paging > input`);
// 获取 页码文本 标签
const span = document.querySelector(`#paging > span`);

// 拿到路径（页码、展示数）
const urlParams = new URLSearchParams(window.location.search);
const page = Number(urlParams.get("page")) || 1;
const limit = Number(urlParams.get("limit")) || 10;

// 自动改变页码
span.innerHTML = `第 ${page} 页`;

// 给添加老师按钮一个跳转
inputs[0].addEventListener("click", () => {
  // 跳转到添加老师的请求路径
  location.href = "./add.html";
});

// 首页
inputs[1].addEventListener("click", () => {
  // 回到首页
  location.href = `/teacher?page=1&limit=${limit}`;
});

// 上一页
inputs[2].addEventListener("click", () => {
  // 页码减一（保证页码不会为 0）
  location.href = `/teacher?page=${page > 1 ? page - 1 : 1}&limit=${limit}`;
});

// 下一页
inputs[3].addEventListener("click", () => {
  // 页码加一
  location.href = `/teacher?page=${page + 1}&limit=${limit}`;
});

/**
 * 渲染老师列表
 */
function getTeachers() {
  // 异步请求
  setTimeout(() => {
    // fetch 请求
    fetch(`${apiUrl}/teachers`, {
      // 请求方法
      method: "get",
      // 请求头
      headers: { "Content-Type": "Authorization" },
    })
      .then((response) => {
        // 如果状态码 200 则请求成功
        if (response.status === 200) {
          // 解析响应体为 JSON
          return response.json();
        }
        // 否则 抛出异常及当前状态码
        throw new Error(`HTTP error! Status: ${response.status}`);
      })
      .then((data) => {
        if (data.code === 200) {
          // 表格标题
          const title = `
           <tr>
               <th>编号</th>
               <th>姓名</th>
               <th>年龄</th>
               <th>性别</th>
               <th>联系方式</th>
               <th>教学班级</th>
               <th>操作</th>
           </tr>  
               `;

          // 如果列表为空
          if (data.data === null) {
            // 重新把查询的数据显示在页面上
            tbody.innerHTML =
              title +
              `
              <tr>
                  <td colspan="7" style="padding: 20px;">${data.message}</td>
              <tr>
            `;
          } else {
            // 查询到的老师列表
            const teachers = data.data.map((teacher) => {
              return `
                  <tr>
                      <td>${teacher.id}</td>
                      <td>${teacher.teacherName}</td>
                      <td>${teacher.teacherAge}</td>
                      <td>${teacher.teacherSex}</td>
                      <td>${teacher.phone}</td>
                      <td>${teacher.className}</td>
                      <td>
                          <input type="button" value="修改" data-teacherId='${teacher.id}' />
                          <input type="button" value="删除" data-teacherId='${teacher.id}' />
                      </td>
                  </tr>
                  `;
            });

            // 重新把查询的数据显示在页面上
            tbody.innerHTML = title + teachers.join("");
          }
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }, 100);
}

// 查询所有老师信息
getTeachers();
